<!--
 * @Author: wfl
 * @LastEditors: ln
 * @description:
 * @updateInfo:
 * @Date: 2023-03-20 16:30:41
 * @LastEditTime: 2023-08-14 09:55:03
-->
<script lang="ts" setup name="IkColorfulCard">
defineProps({
  colorFrom: {
    type: String,
    default: '#843cf6'
  },
  colorTo: {
    type: String,
    default: '#759bff'
  },
  header: {
    type: String,
    default: ''
  },
  headerStyle: {
    type: Object,
    default: () => {
      return {
        fontSize: '20px',
        color: '#fff'
      }
    }
  },
  num: {
    type: Number,
    default: 0
  },
  numStyle: {
    type: Object,
    default: () => {
      return {
        fontSize: '36px',
        color: '#fff'
      }
    }
  },
  tip: {
    type: String,
    default: ''
  },
  tipStyle: {
    type: Object,
    default: () => {
      return {
        fontSize: '14px',
        color: '#eee'
      }
    }
  },
  icon: {
    type: String,
    default: ''
  }
})
</script>

<template>
  <el-card
    shadow="hover"
    class="mini-card"
    :style="{
      background: `linear-gradient(50deg, ${colorFrom}, ${colorTo})`,
    }"
  >
    <template #header>
      <span :style="headerStyle">{{ header }}</span>
    </template>
    <div class="num">
      <span :style="numStyle">{{ num }}</span>
    </div>
    <div class="tip">
      <span :style="tipStyle">{{ tip }}</span>
    </div>
    <el-icon v-if="icon">
      <IkSvgIcon :name="icon" :rotate="20" pop />
    </el-icon>
  </el-card>
</template>

<style lang="scss" scoped>
.mini-card {
  position: relative;
  color: #fff;
  text-shadow: 0 0 2px #000;
  cursor: pointer;

  :hover {
    .el-icon {
      right: 0;
      top: 0;
    }
  }

  :deep(.el-card__header) {
    position: relative;
    z-index: 1;
    border-bottom: 0;
    font-size: 18px;
  }

  :deep(.el-card__body) {
    padding-top: 0;
  }

  .num {
    position: relative;
    z-index: 1;
    font-size: 36px;
  }

  .tip {
    margin-top: 10px;
    font-size: 14px;
    color: #eee;
  }

  .el-icon {
    transition: 0.3s;
    font-size: 120px;
    position: absolute;
    right: -10px;
    top: -6px;
  }

  :deep(.ik, .iksvg) {
    font-size: 120px !important;
    width: 100% !important;
  }
}
</style>
